<template>
    <!-- 可折叠面板表格封装 -->
    <div class="demo-collapse">
        <el-collapse accordion>
            <el-collapse-item v-for="(item, index) in items" :key="index" :name="item.name">
                <template #title>
                    <div class="title-box">
                        <div class="left">{{ item.title.left }}</div>
                        <div class="right">{{ item.title.right }}</div>
                    </div>
                </template>
                <ul class="building-list" v-if="item.content.type === 'list'">
                    <li v-for="(building, idx) in item.content.buildings" :key="idx">{{ building }}</li>
                </ul>
                <div v-else v-html="item.content.text"></div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script>
export default {
    props: {
        items: {
            type: Array,
            required: true,
            default: () => []
        }
    },
    data() {
        return {};
    }
};
</script>
<style scoped lang="scss">
.title-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 16px;

}

ul.building-list {
    border: 1px solid #b7c6d8;
    border-radius: 5px;

    li {
        border-bottom: 1px solid #b7c6d8;
        height: 50px;
        line-height: 50px;
        padding-left: 10px;
        cursor: pointer;
        color: #495057;
    }

    li:hover {
        color: #000;
    }

    li:last-child {
        border-bottom: none;
    }
}
</style>